<template>
  <Transition enter-active-class="animate__fadeInRightBig" leave-active-class="animate__fadeOutRightBig">
    <main class="vacation__main flex-1 animate__animated ">
      <UserInfo v-for="item in userInfos" :key="item.id" :item="item" />
      <div class="vacation__main__footer">
        <el-pagination v-model="page.current" background layout="prev, pager, next" :total="page.total" class="mt-4"
          @next-click="nextPage" @prev-click="prevPage" @current-change="sendPage" />
      </div>
    </main>
  </Transition>
</template>

<script setup lang="ts">
import { IUserInfo } from '@/types/user';
import UserInfo from './user_info.vue';
import { ref, onMounted } from 'vue';
import { IPage } from '@/types/response';
import { getStaffListPageApi } from '@/api/userApi';
const userInfos = ref<IUserInfo[]>([])
const page = ref<IPage>({ current: 1, size: 8, total: 0 })

onMounted(() => {
  sendPage()

})
function sendPage(e?: number) {
  page.value.current = e ?? 1;
  getStaffListPageApi(page.value).then(res => {
    userInfos.value = res.data.list;
    if (page.value.total == 0) {
      page.value.total = res.data.total;

    }
  })
}
function nextPage() {
  if (page.value.size * page.value.current >= page.value.total!) return;
  page.value.current++
  sendPage()

}
function prevPage() {
  if (page.value.current <= 0) return;
  page.value.current--;
  sendPage()

}

</script>


<style lang="scss" scoped>
.vacation__main {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: 10px;



  &__footer {
    display: flex;
    justify-content: flex-end;

    :deep(.el-pagination) {
      .el-pager {
        >li {
          height: 40px;
          width: 40px;
        }
      }
    }
  }
}
</style>